<template>
<div class="datasource-connect-wrapper content">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <div class="content-header">
        <div class="pull-left">
            <ul class="hearder-state">
                <li class="title"><a @click="setStatus(-1)">所有连接({{statusNums.total}})</a>  <span class="border-line" style="height: 22px;top: 5px;"> </span></li>
                <li class="" ><a @click="setStatus(1)" :class="{'selected':selectStatus == 1}"><span class="round back-normal"></span> 正常({{statusNums.normalNum}})</a> <span class="border-line" style="height: 22px;top: 5px;"> </span> </li>
                <li class="" ><a @click="setStatus(0)" :class="{'selected':selectStatus == 0}"><span class="round back-disable"></span> 禁用({{statusNums.disabledNum}})</a></li>
            </ul>
        </div>
        <div class="pull-right">
            <Input placeholder="连接名称" class="search-input" prefix="ios-search" clearable v-model="searchText" @on-enter="queryConnectList"></Input>
            <span class="border-line m-l-10 m-r-5" style="height: 22px; top: 5px;"> </span>
            <a @click="onAddClick"><Icon type="md-add"/>新增连接</a>
        </div>
    </div>
    <div class="connect-table" ref="tableWrapper">
        <div ref="table">
            <Table :data="connectList" :columns="connecColumns" stripe :height="tableHeight" class="fix-scrollbar"></Table>
        </div>
    </div>
    <div>
        <Page :total="statusNums.total" :page-size="page.pageSize" :current="page.pageNum"
            @on-change="onPageNumChange" @on-page-size-change="onPageSizeChange" size="small" show-elevator show-sizer></Page>
    </div>
    <add-connect ref="addConnect" @refresh="refresh"></add-connect>
</div>
</template>

<script>
import AddConnect from './add-connect/add-connect.vue'

import util         from 'util'
import getData      from 'getData'

export default {
    components: {
        AddConnect
    },

    data () {
        return {
            loading: true,
            searchText: '',
            tableHeight: 0,
            statusNums: {
                total: 0,
                normalNum: 0,
                disabledNum: 0,
            },
            selectStatus: -1,

            page: {
                pageNum: 1,
                pageSize: 20,
            },

            connectList: [],
            connecColumns: [
                {
                    title: '状态',
                    key: 'status',
                    width: 80,
                    align: 'center',
                    fixed: 'left',
                    render: (h, params) =>{
                        if(params.row.status == 0){
                            return (<i class="round back-disable"></i> )
                        }else if(params.row.status == 1){
                            return (<i class="round back-normal"></i> )
                        }
                    }
                },
                {
                    title: '连接名称',
                    key: 'connectName',
                    fixed: 'left',
                    width: 220,
                    tooltip: true,
                    render: (h, params) =>{
                        var row = params.row;
                        return <a on-click={()=> {this.onConnectClick(row)}}>{row.connectName}</a>
                    }
                },
                {
                    title: '类型',
                    key: 'connectType',
                    width: 100
                },
                {
                    title: '连接地址',
                    width: 140,
                    key: 'connectHost'
                },
                {
                    title: '端口号',
                    width: 90,
                    key: 'connectPort'
                },
                {
                    title: '数据库名',
                    key: 'databaseName',
                    width: 160,
                    tooltip: true,
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    width: 180,
                    render: (h, params) => {
                        const temp = util.util.formatDate(params.row.createTime, 3);
                        return (
                            <div>
                            {temp}
                            </div>
                        )
                    }
                },
                {
                    title: '描述',
                    key: 'remark',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: ' ',
                    key: 'operations',
                    fixed: 'right',
                    width: 130,
                    render: (h, params) => {
                        const row = params.row;
                        var statusBtnText;
                        var statusBtnIcon;
                        if (row.status == 0) {
                            statusBtnText = '启用';
                            statusBtnIcon = 'zlstbd-icon-unlock';
                        } else {
                            statusBtnText = '禁用';
                            statusBtnIcon = 'zlstbd-icon-disable';
                        }
                        return (<div class="table-column-btn">
                                <div>
                                    <tooltip content="编辑" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onEditClick(row)}}><i class="zlstbd-icon-edit"></i></a>
                                    </tooltip>
                                    <tooltip content={statusBtnText} placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onStatusChangeClick(row)}}><i class={statusBtnIcon}></i></a>
                                    </tooltip>
                                    <tooltip content="删除" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onDeleteClick(row)}}><i class="zlstbd-icon-delete"></i></a>
                                    </tooltip> </div>
                            </div>);
                    }
                }
            ],
        }
    },

    watch: {
        connectList: {
            deep: true,
            handler(val) {
                this.setTableHeight();
            }
        }
    },

    methods: {
        refresh() {
            this.queryConnectList();
            this.countStatusNums();
        },
        queryConnectList() {
            this.loading = true;
            var reqData = this.page;
            reqData.params = {
                status: this.selectStatus,
                connectName: this.searchText
            };
            getData.post('queryDsConnectList', reqData).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.connectList = res.data.data;
                } else {
                    this.$Message.error('查询数据失败，请检查网络或联系管理员！');
                    this.connectList = [];
                    console.error(res);
                }
            })
        },
        countStatusNums() {
            getData.get('countDsConnectStatusNums').then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.statusNums = res.data.data;
                } else {
                    this.$Message.error('查询数据失败，请检查网络或联系管理员！');
                    console.error(res);
                }
            });
        },
        onEditClick(data) {
            this.$refs.addConnect.show(data);
        },
        onDeleteClick(data){
            this.$Modal.confirm({
                title: '删除连接',
                content: '确定删除连接 ' + data.connectName + ' ？',
                onOk: ()=> {
                    getData.get('deleteDsConnect', {}, data.connectId).then(res => {
                        if (res.status == 200 && res.data.code == '000') {
                            this.$Message.success('删除连接' + data.connectName + '成功！');
                            this.refresh();
                        } else if (res.status == 200) {
                            this.$Message.warning('删除连接失败：' + res.data.errorMsg);
                        } else {
                            this.$Message.error('删除连接失败，请检查网络或联系管理员！');
                            console.error(res);
                        }
                    })
                }
            })
        },
        onStatusChangeClick(data) {
            var title = '连接';
            var reqData = util.util.cloneObj(data);
            if (data.status == 1) {
                title = '禁用' + title;
                reqData.status = 0;
            }
            if (data.status == 0) {
                title = '启用' + title;
                reqData.status = 1;
            }
            this.$Modal.confirm({
                title: title,
                content: '确定' + title + ' ' + data.connectName + ' ？',
                onOk: ()=> {
                    getData.post('saveDsConnect', reqData).then(res => {
                        if (res.status == 200  && res.data.code == '000') {
                            this.$Message.success(title + '成功！');
                            this.refresh();
                        } else {
                            this.$Message.error(title + '失败，请检查网络或联系管理员！');
                            console.error(res);
                        }
                    })
                }
            })
        },
        onAddClick() {
            this.$refs.addConnect.show();
        },
        onConnectClick(connect) {
            console.log('onConnectClick', connect);
            this.$router.push({
                name: 'ds-connnect-detail',
                params: connect
            });
        },
        onPageNumChange(pageNum) {
            this.page.pageNum = pageNum;
            this.queryConnectList();
        },
        onPageSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.queryConnectList();
        },
        setStatus(status) {
            this.selectStatus = status;
            this.page.pageNum = 1;
            this.queryConnectList();
            if (status == -1) {
                this.countStatusNums();
            }
        },
        setTableHeight() {
            this.tableHeight = 0;
            this.$nextTick(() => {
                var tableHeight = this.$refs.table.offsetHeight;
                var tableWrapperHeight = this.$refs.tableWrapper.offsetHeight;
                if (tableHeight > tableWrapperHeight) {
                    this.tableHeight = tableWrapperHeight;
                }
            })
        }
    },

    mounted () {
        this.refresh();
    }
}
</script>

<style lang="less">
.datasource-connect-wrapper {
    position: relative;
    height: calc(~"100vh - 88px");
    .datasource-table {
        height: calc(~"100vh - 176px");
        overflow: auto;
    }
}
</style>
